import React, { useEffect, useState } from "react";

import {
  Modal,
  Form,
  InputNumber,
  Table,
  Typography,
  Button,
  Input,
  Select,
} from "antd";
import { useDispatch } from "react-redux";
import { getroad ,getroadsearch} from "../../api/operation_maintenance/road_points";
import "./1.scss";

const App = () => {
  const [open, setOpen] = useState(false);
  const [data, setData] = useState([]);
  const showModal = (ref) => {
    setIsModalOpen(true);
    
   
  };
  const dispatch = useDispatch()

  const [aereewola,setaree]=useState({
    asidekind:'',
    nickname:'',
    kind:'',
    kind11:''

  })
  const { Option } = Select;
  const [form] = Form.useForm();
  const onFinish = (values) => {
    console.log(values);
  };
  const onReset = () => {
    form.resetFields();
  };
  
 
  useEffect(() => {
    getroad().then((res) => {
      
     
      setData(res.data)
      dispatch({
        type: 'attlist',
        payload:res.data
      })
    });
   
  },[]);
  function dsa(){
    let obj=JSON.parse(localStorage.getItem('data')) || []
    console.log(obj,'----------------');
    
    setData(obj)
  }
 
  const handleOk = () => {
    setIsModalOpen(false);
    console.log(aereewola);
    dispatch({
      type:'add',
      payload:aereewola 
    })
    dsa()
     form.resetFields();
  };
    const [search, setsearh] = useState({
    kind11: "",
    asidekind: "",
    nickname: "",
  });
  const onFinishFailed=(errorInfo)=>{
    console.log('Failed:', errorInfo);
  }

  const EditableCell = ({
    editing,
    dataIndex,
    title,
    inputType,
    record,
    index,
    children,
    ...restProps
  }) => {
    const inputNode = inputType === "number" ? <InputNumber /> : <Input />;
    return (
      <td {...restProps}>
        {editing ? (
          <Form.Item
            name={dataIndex}
            style={{
              margin: 0,
            }}
            rules={[
              {
                required: true,
                message: `Please Input ${title}!`,
              },
            ]}
          >
            {inputNode}
          </Form.Item>
        ) : (
          children
        )}
      </td>
    );
  };
 
  const [editingKey, setEditingKey] = useState("");
  // 打开框状态
  const [isModalOpen, setIsModalOpen] = useState(false);
  const isEditing = (record) => record.key === editingKey;
  const edit = (record) => {
    form.setFieldsValue({
      name: "",
      age: "",
      address: "",
      ...record,
    });
    setEditingKey(record.key);
  };
  const cancel = () => {
    setEditingKey("");
  };
 
  
  const handleCancel = () => {
    setIsModalOpen(false);
  };

  const [arrta, setlis]=useState({})
 
  const columns = [
    {
      title: "序号",
      render: function (text, record, index) {
        return <h3>{index + 1}</h3>;
      },
    },
    {
      title: "所在省份",
      dataIndex: "asidekind",
    },
    {
      title: "所在城市",
      dataIndex: "nickname",
    },
    {
      title: "所在县区",
      dataIndex: "kind",
    },
    {
      title: "道路站点名称",
      dataIndex: "kind11",
    },
    {
      title: "操作",
      dataIndex: "operation",
      render: (_, record) => {
        return(
          <>
         <Typography.Link onClick={() => edit(record)}>操作</Typography.Link>
            <Typography.Link
              onClick={() => edit(record)}
              style={{ marginLeft: "10px", marginRight: "10px" }}
            > 
              删除
            </Typography.Link>
            <Typography.Link onClick={() => {
              console.log(record);
              setOpen(true)
              setlis(record)
              window.localStorage.setItem('useraa',JSON.stringify( record))
              console.log(arrta);
            }}>查看</Typography.Link>
                </>
        )
       
      },
    },
  ];

  const mergedColumns = columns.map((col) => {
    if (!col.editable) {
      return col;
    }
    return {
      ...col,
      onCell: (record) => ({
        record,
        inputType: col.dataIndex === "age" ? "number" : "text",
        dataIndex: col.dataIndex,
        title: col.title,
        editing: isEditing(record),
      }),
    };
  });
  let obj=window.localStorage.getItem('useraa')
  let fww=JSON.parse(obj)||""
  console.log(fww);
  return (
    <>
      <Form form={form} name="control-hooks" onFinish={onFinish}>
        <div className="left">
        <div className="left">
          <Form.Item name="note" label="道路站点名称">
            <Input
              value={search.kind11}
              onChange={(e) => {
                setsearh({ ...search, kind11: e.target.value });
              }}
            />
          </Form.Item>
          <Form.Item label="所属区域">
            <Select
              placeholder="请选择一个选项"
              onChange={(value) => {
                setsearh({ ...search, asidekind: value });
              }}
              allowClear
              // value={search.asidekind}
            >
              <Option value="山西省">山西省</Option>
              <Option value="湖北省">湖北省</Option>
              <Option value="上海市">上海市</Option>
              <Option value="河北省">河北省</Option>
              <Option value="陕西省">陕西省</Option>
            </Select>
         
          </Form.Item>
        </div>
        </div>
        <div className="right">
          <Form.Item name="btn">
            <Button htmlType="button" onClick={onReset}>
              重置
            </Button>
            <Button
              type="primary"
              htmlType="submit"
              style={{ marginLeft: "10px", marginRight: "10px" }}
              onClick={() => {
                getroadsearch(search).then((res) => {
                  setData(res);
                });
              }}
            >
              查询
            </Button>
           
         
            <Button type="primary" onClick={showModal}>
        新增
      </Button>

          </Form.Item>
        </div>
      </Form>
      <Form form={form} component={false}>
        <Table
        rowKey='id'
          components={{
            body: {
              cell: EditableCell,
            },
          }}
          bordered
          dataSource={data}
          columns={mergedColumns}
          rowClassName="editable-row"
          pagination={{
            onChange: cancel,
          }}
        />
      </Form>



   {/* //框 */}




   
      <Modal title='新增'
      width={800}
      
      centered={false}
      className='los'
            open={isModalOpen} 
            onOk={handleOk}
            onCancel={handleCancel}>
                <Form
                    form={form}
                    name="basic"
                    labelCol={{ span: 8 }}
                    wrapperCol={{ span: 16 }}
                    style={{ maxWidth: 600 }}
                    initialValues={{ remember: true }} 
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    autoComplete="off"
                >
                    <Form.Item label="所在省份" name="asidekind" rules={[{ required: true, message: 'Please input your key!' }]}
                 
                    >
                        <Input value={aereewola.asidekind} onChange={(e)=>{
                          setaree({...aereewola,asidekind:e.target.value});
                        }}/>
                    </Form.Item>

                    <Form.Item label="所在城市" name="nickname" rules={[{ required: true, message: 'Please input your name!' }]}>
                        
                    <Input value={aereewola.nickname} onChange={(e)=>{
                          setaree({...aereewola,nickname:e.target.value});
                        }}/>
                    </Form.Item>

                    <Form.Item label="所在县区" name="kind" rules={[{ required: true, message: 'Please input your age!' }]}>
                        
                    <Input value={aereewola.kind} onChange={(e)=>{
                          setaree({...aereewola,kind:e.target.value});
                        }}/>
                    </Form.Item>

                    <Form.Item label="道路站点名称" name="kind11" rules={[{ required: true, message: 'Please input your address!' }]}>
                        
                    <Input value={aereewola.kind11} onChange={(e)=>{
                          setaree({...aereewola,kind11:e.target.value});
                        }}/>
                    </Form.Item>
  
                  
                </Form>
            </Modal>
                    



{/* 查看对话框 */}




           
      <Modal
        title="查看特殊车辆详情"
        centered
        open={open}
        onOk={() => setOpen(false)}
        onCancel={() => setOpen(false)}
        width={1700}
        className="aou"
        
      >
        <span>序号:<span>{fww.id}</span></span>
        <span>所在省份:<span>{fww.asidekind}</span></span>
        <span>所在城市:<span>{fww.nickname}</span></span>
        <span>所在县区:<span>{fww.kind}</span></span>
        <span>道路站点名称:<span>{fww.kind11}</span></span>
        <span>城建时间:<span>{fww.time}</span></span>
        <span>详细简介:<span>{fww.desc}</span></span>
      
      </Modal>
    </>
  );
};

export default App;
